<template>
  <div class="config-place-list">
    <div class="fr ac mb-20">
      <h2 class="title f1">卡点信息</h2>
      <div class="f-14 a link" @click="$router.push('/config/place/stuck')">创建<i class="el-icon-arrow-right b ml-5"></i></div>
      <a class="f-14 a link ml-20" :href="`/api/stuck/batchexport?schoolname=${$store.state.classinfo.schoolname}`">导出<i class="el-icon-arrow-right b ml-5"></i></a>
    </div>
    <div class="fr ac search-bar mb-20">
      <div class="fr ac item">
        <div class="label f-14">卡点名称</div>
        <el-input v-model="stuck.params.stuckname"/>
      </div>
      <div class="fr ac item">
        <div class="label f-14">负责人</div>
        <el-input v-model="stuck.params.contact"/>
      </div>
      <el-button type="primary" icon="el-icon-search" @click="getList('stuck', 1)">搜索</el-button>
    </div>
    <div class="list" v-loading="stuck.loading" element-loading-background="rgba(0, 0, 0, 0.8)">
      <table>
        <thead>
        <th colspan="2">卡点名称</th>
        <th colspan="2">卡点位置</th>
        <th colspan="4">人员配置</th>
        <th colspan="2">负责人</th>
        <th colspan="3">联系电话</th>
        <th colspan="4">设备配置</th>
        <th colspan="2">创建时间</th>
        <th colspan="3">操作</th>
        </thead>
        <tbody>
        <tr v-for="item in stuck.list" :key="item.tid">
          <td colspan="2">{{item.stuckname}}</td>
          <td colspan="2">{{item.stuckposition}}</td>
          <td colspan="4">{{item.staffing}}</td>
          <td colspan="2">{{item.contact}}</td>
          <td colspan="3">{{item.phone}}</td>
          <td colspan="4">
            <span v-for="(val, idx) in item.deployList" :key="val.id">{{val.name}}x{{val.num}}<span v-if="idx">，</span></span>
          </td>
          <td colspan="2">{{item.createtime}}</td>
          <td colspan="3">
            <span @click="$router.push(`/config/place/stuck/${item.tid}`)">编辑</span>
            <span @click="remove('stuck', item)">删除</span>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="tc mt-30 page">
      <el-pagination background layout="prev, pager, next" prev-text="上一页" next-text="下一页" :disabled="stuck.loading" :pager-count="5" :page-size="5" :total="stuck.total" :current-page="stuck.current" @current-change="getList('stuck', $event)"/>
    </div>

    <div class="fr ac mb-20">
      <h2 class="title f1">场所信息</h2>
      <div class="f-14 a link" @click="$router.push('/config/place/tplace')">创建<i class="el-icon-arrow-right b ml-5"></i></div>
      <a class="f-14 a link ml-20" :href="`/api/tplace/batchexport?schoolno=${$store.state.classinfo.schoolno}`">导出<i class="el-icon-arrow-right b ml-5"></i></a>
    </div>
    <div class="fr ac search-bar mb-20">
      <div class="fr ac item">
        <div class="label f-14">场所名称</div>
        <el-input v-model="tplace.params.placename"/>
      </div>
      <el-button type="primary" icon="el-icon-search" @click="getList('tplace', 1)">搜索</el-button>
    </div>
    <div class="list" v-loading="tplace.loading" element-loading-background="rgba(0, 0, 0, 0.8)">
      <table>
        <thead>
        <th>场所ID</th>
        <th>场所名称</th>
        <th>场所位置</th>
        <th>操作</th>
        </thead>
        <tbody>
        <tr v-for="item in tplace.list" :key="item.pid">
          <td>{{item.placeid}}</td>
          <td>{{item.placename}}</td>
          <td>{{item.placeseat}}</td>
          <td>
            <span @click="$router.push(`/config/place/tplace/${item.placeid}`)">编辑</span>
            <span @click="remove('tplace', item)">删除</span>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="tc mt-30 page">
      <el-pagination background layout="prev, pager, next" prev-text="上一页" next-text="下一页" :disabled="tplace.loading" :pager-count="5" :page-size="5" :total="tplace.total" :current-page="tplace.current" @current-change="getList('tplace', $event)"/>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'config-place-list',
    data () {
      return {
        stuck: { // 医院
          list: [],
          current: 1,
          total: 0,
          loading: false,
          params: {
            stuckname: '',
            contact: ''
          }
        },
        tplace: { // 医疗机关
          list: [],
          current: 1,
          total: 0,
          loading: false,
          params: {
            placename: ''
          }
        }
      }
    },
    methods: {
      getList (type, current) {
        const item = this[type]
        const key = type === 'tplace' ? 'TPlace' : type
        item.loading = true
        if (current) item.current = current
        this.$http(`/${type}/fuzzyquery/page`, { pagesize: 5, pagecurrent: item.current, ...item.params }).then(
          res => {
            const data = res.data[key]
            data.records.forEach((v, i) => {
              v.deployList = v.deploy ? JSON.parse(v.deploy).map((val, idx) => {
                val.id = (new Date() - 0) + idx
                return val
              }) : []
            })
            item.list = data.records
            item.total = data.total
            item.loading = false
          }
        )
      },
      remove (type, item) {
        let name = '', key = ''
        if (type === 'stuck') {
          name = item.stuckname
          key = 'tid'
        }
        if (type === 'tplace') {
          name = item.placename
          key = 'pid'
        }
        this.$confirm(`你确定要删除 ${name} 吗？`, '提示', { closeOnClickModal: false, center: true, customClass: 'custom' }).then(
          () => {
            this[type].loading = true
            return this.$http(`/${type}/delete`, { [key]: key === 'pid' ? item[key] + '' : item[key] })
          }
        ).then(() => {
          this.$notify({
            title: '成功',
            message: `删除成功`,
            type: 'success'
          })
          this.getList(type, 1)
        }).catch(() => {})
      }
    },
    created () {
      this.getList('stuck')
      this.getList('tplace')
    }
  }
</script>
